<template>
<!-- 邮件通知 -->
    <div>
        <el-row type="flex" justify="space-between">
            <el-form class="serach-form" ref="searchForm" :model="searchForm" :inline="true" @submit.native.prevent>
                <el-form-item v-if="this.$store.state.userinfo.isMuilUnitUser">
                    <el-select filterable @change="search" v-model="searchForm.orgIds" placeholder="请选择业主单位">
                        <el-option label="全部业主单位" :value="$store.state.userinfo.organizationIds"></el-option>
                        <el-option
                            v-for="item in orgList"
                            :key="item.organizationId"
                            :label="item.shortName"
                            :value="item.organizationId">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-select filterable @change="search" v-model="searchForm.type"  placeholder="请选择邮件类型">
                        <el-option label="全部邮件类型" value="0"></el-option>
                        <el-option
                            v-for="item in typeOptions"
                            :key="item.dictKey"
                            :label="item.dictValue"
                            :value="item.dictKey">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item >
                    <el-date-picker
                        v-model="searchForm.time"
                        type="daterange"
                        align="right"
                        unlink-panels
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        value-format="yyyy-MM-dd"
                        :picker-options="utils.intTimePickerOptions()"
                        @change="search">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-input
                        placeholder="请输入收件邮箱"
                        v-model="searchForm.otherObjectNo"
                        @keyup.enter.native="search"
                        clearable>
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button class="form-search-btn" type="primary" @click="search">查询</el-button>
                </el-form-item>
            </el-form>
        </el-row>
        <div>
            <el-table
                v-loading="loading"
                ref="smsNoticeTableList"
                :data="tableData"
                style="width: 100%">
                <el-table-column label="序号" type="index" width="50"></el-table-column>
                <el-table-column v-if="this.$store.state.userinfo.isMuilUnitUser" label="联网单位" prop="organizationName" width="200"></el-table-column>
                <el-table-column label="发件人邮箱" prop="objectNo" width="200"></el-table-column>
                <el-table-column label="收件人邮箱" prop="otherObjectNo"></el-table-column>
                <el-table-column label="发送时间" width="200">
                    <template slot-scope="scope">
                        {{ utils.ilinkTimeformat.format(new Date(scope.row.sendTime), 'yyyy-MM-dd hh:mm:ss') }}
                    </template>
                </el-table-column>
                <el-table-column label="邮件类型" prop="typeName" width="200"></el-table-column>
                <el-table-column label="邮件内容">
                    <template slot-scope="scope">
                        <p v-html="scope.row.contents"></p>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                background
                @current-change="handleCurrentChange"
                @size-change="handleSizeChange"
                :current-page.sync="currentPage"
                :page-sizes="[10, 50, 100]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>
    </div>
</template>
<script>
import utils from '@/utils/util'
import { getOrgList } from '@/api/org'
import { getDictByCode} from '@/api/dic'
import { getERList } from '@/api/communicat' 

export default {
    name: 'SmsRecord',
    data() {
        return {
            loading: true,
            utils: utils,
            orgList: [],
            typeOptions: [],
            searchForm: {
                orgIds: this.$store.state.userinfo.isMuilUnitUser ? this.$store.state.userinfo.organizationIds : this.$store.state.userinfo.org.id,
                type: '0',
                otherObjectNo: '',
                time: '',
            },
            tableData: [],
            // 分页
            currentPage: 1,
            pageSize: 10,
            total: 0,
        }
    },
    created() {
        // 获取业主单位信息
        getOrgList({
            queryType: 0
        }).then(res => {
            if(res.status = 200) {
                this.orgList = res.data
            }
        })
        // 获取邮件类型
        getDictByCode({code: 34}).then(res => {
            this.typeOptions = res.data.dictValueObj
        })

        this.search()
    },
    methods: {
        // 获取列表数据
        getTableData(pageIndex, pageSize) {
            let that = this
            that.loading = true
            if (pageIndex) {
                that.currentPage = pageIndex
            }
            if (pageSize) {
                that.pageSize = pageSize
            }
            getERList({
                orgIds: that.searchForm.orgIds,
                type: that.searchForm.type,
                otherObjectNo: that.searchForm.otherObjectNo,
                startTime: that.searchForm.time && that.searchForm.time.length > 0 ? that.searchForm.time[0] + ' 00:00:00' : '', // 创建时间
                endTime: that.searchForm.time && that.searchForm.time.length > 0 ? that.searchForm.time[1] + ' 23:59:59' : '',
                pageIndex: that.currentPage - 1,
                pageSize: that.pageSize,
                queryType: 1
            }).then(res => {
                if(res.status === 200) {
                    that.tableData = res.data
                    that.total = res.total
                }
                that.loading = false
            })
            
        },
        handleSizeChange(pageSize) {
            this.getTableData(1, pageSize)
        },
        handleCurrentChange(currentPage) {
            this.getTableData(currentPage)
        },
        search() {
            this.getTableData(1)
        },
    }
}
</script>
